<style>
    .tags-h3{
        margin-bottom: 5px;
    }
    .tag-group{
        display:block;
        margin-bottom: 10px;
    }
    .tag-li{
        float: left;
        margin: 0 5px;
        padding: 2px 4px;
        border: 1px solid #d6d6d6;
        cursor: pointer;
    }
    .tag-li:hover{
        color: #f00;
    }
    .tag-select{
        color: #616161 !important;
        font-weight: 600;
        border: 2px solid #e4393c !important;
    }
</style>
<!--<h2>标签</h2>-->
<volist name="tags_group" id="tag_group">
    <!--<h3 class="tags-h3">{$tag_group.title}</h3>-->
    <h2 class="tags-h3">{$tag_group.title}</h2>
    <div class="tag-group clearfix">
        <volist name="tags" id="tag">
            <eq name="tag.field" value="$tag_group['field']" >
                <switch name="tag_group.type">
                    <case value="number">
                        <li class="tag-li" data-id="{$tag.id}" data-field="{$tag_group.field}" data-name="{$tag.name}" data-value="{$tag.value}" data-type="{$tag_group.type}"><a href="{:U('Goods/detail',array('id'=>$tag['value']))}">{$tag.name}</a></li>
                    </case>
                    <case value="color">
                        <li class="tag-li" data-id="{$tag.id}" style="border:1px solid {$tag.value};" data-name="{$tag.name}" data-value="{$tag.value}" data-field="{$tag_group.field}" data-type="{$tag_group.type}">{$tag.name}</li>
                    </case>
                    <case value="text">
                        <li class="tag-li" data-id="{$tag.id}" data-name="{$tag.name}" data-value="{$tag.value}" data-field="{$tag_group.field}" data-type="{$tag_group.type}">{$tag.name}</li>
                    </case>
                </switch>
            </eq>
        </volist>
    </div>
</volist>
<input type="text" hidden="hidden" name="tags">
<script>
    $(function(){
        $(".tag-li").on("click",function(){
            // 当前标签ID
            var tag_id = $(this).data("id");

            // 标签分组
            var field = $(this).data("field");

            // 排他,取消同组选中标签,保留当前标签状态
            var tags = $(".tag-li");
            $(".tag-li").each(function(){
                if($(this).data("field") == field && $(this).data("id") != tag_id){
                    $(this).removeClass("tag-select");
                }
            });

            // 选中标签
            if($(this).hasClass("tag-select"))
                $(this).removeClass("tag-select");
            else
                $(this).addClass("tag-select");

            // 刷新标签状态
            tag_fresh();
        });

        // 刷新标签状态
        function tag_fresh(){
            var tag_json_obj = {};
            $(".tag-li").each(function(i){
                if($(this).hasClass("tag-select")){
                    var name = $(this).data("name");
                    var value = $(this).data("value");
                    var field = $(this).data("field");
                    tag_json_obj[i] = {"name":name, "value":value, "field":field};
                }
            });
            var tag_json = JSON.stringify(tag_json_obj);
            $("input[name=tags]").val(tag_json);
        }
    });
</script>